<template>
    <view class="logistics-list-main">
        <view class="content">
            <view class="title">{{ Data.list.length }}个包裹已发出</view>
            <view class="list">
                <view class="item" v-for="(item, index) in Data.list" :key="index">
                    <view class="item-title">
                        <view>
                            {{ getStateName(item.logisticsInfo?.state) || '已发货' }}
                        </view>
                        <view>{{ item.logisticsCompany }} {{ item.logisticsNo }}</view>
                    </view>
                    <view class="item-desc">{{ item.logisticsInfo?.context }}</view>
                    <view class="item-img-list">
                        <image class="item-img" v-for="(el, idx) in item.goods" :key="idx" :src="el.goodsImg"></image>
                    </view>
                    <view class="item-detail">
                        <view>共{{ goodsNumFn(item.goods) }}件商品</view>
                        <view class="item-detail-right" @click="toLogisticsDetail(item)">查看详情</view>
                    </view>
                </view>
            </view>
        </view>
        <Loading />
    </view>
</template>
<script setup>
import { reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { isNotEmpty } from '@/commons/utils.js';
import request from '@/request';
import store from '@/store';
import router from '@/router';
import Loading from '@/components/el-loading';

const goodsStore = store.useGoodsStore();

// 快递单当前状态，默认为0在途，1揽收，2疑难，3签收，4退签，5派件，8清关，14拒签
const stateList = [
    {
        name: '在途',
        code: 0
    },
    {
        name: '已揽收',
        code: 1
    },
    {
        name: '疑难',
        code: 2
    },
    {
        name: '已签收',
        code: 3
    },
    {
        name: '退签',
        code: 4
    },
    {
        name: '派件中',
        code: 5
    },
    {
        name: '清关',
        code: 8
    },
    {
        name: '拒签',
        code: 14
    }
];

const Data = reactive({
    list: []
});

const initData = () => {
    Data.list = [];
    goodsStore.logisticsGoodsList.map(item => {
        if (Data.list.every(el => el.logisticsNo != item.logistics.logisticsNo)) {
            Data.list.push({
                id: item.logistics.id,
                logisticsCompany: item.logistics.logisticsCompany,
                logisticsNo: item.logistics.logisticsNo,
                goods: [item]
            });
        } else {
            let index = Data.list.findIndex(el => el.logisticsNo == item.logistics.logisticsNo);
            Data.list[index].goods.push(item);
        }
    });
    Data.list.map((el, index) => {
        getLogistics(el.id, index);
    });
};

const getLogistics = async (id, index) => {
    let res = await request('expressInfoServ', { id: id });
    let info = (isNotEmpty(res.data) && res.data) || {};
    let list = info.data || [];
    let context = list[0]?.context;
    Data.list[index].logisticsInfo = {
        state: info.state,
        context: context
    };
};

const toLogisticsDetail = val => {
    goodsStore.logisticsGoodsInfo = val.goods[0];
    router.push({
        path: '/pages-user/logistics/index',
        query: {
            id: val.id,
            logisticCompany: val.logisticsCompany,
            logisticNo: val.logisticsNo
        }
    });
};

const getStateName = code => {
    let info = stateList.find(el => el.code == code) || {};
    return info.name;
};

const goodsNumFn = list => {
    return list.reduce((pre, cur) => pre + cur.sendNum, 0);
};

onShow(() => {
    initData();
});
</script>
<style lang="scss" scoped>
.logistics-list-main {
    background: #f8f8f8;
    .content {
        .title {
            padding: 11rpx 29rpx;
            line-height: 33rpx;
            color: #fe292b;
            font-size: 24rpx;
            background: #ffebeb;
        }
        .list {
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
            .item {
                margin-bottom: 18rpx;
                padding: 29rpx;
                background: #ffffff;
                .item-title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #333333;
                    font-size: 29rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    line-height: 40rpx;
                }
                .item-desc {
                    padding: 22rpx 0;
                    color: #999999;
                    font-size: 25rpx;
                    line-height: 25rpx;
                }
                .item-img-list {
                    white-space: nowrap;
                    overflow-x: auto;
                    .item-img {
                        margin-right: 18rpx;
                        display: inline-block;
                        width: 159rpx;
                        height: 159rpx;
                        border-radius: 7rpx;
                    }
                }
                ::-webkit-scrollbar {
                    width: 0;
                    height: 0;
                    color: transparent;
                    display: none;
                }
                .item-detail {
                    padding-top: 22rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 25rpx;
                    line-height: 25rpx;
                    .item-detail-right {
                        color: #6088ef;
                    }
                }
            }
        }
    }
}
</style>
